import React from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { RouteInterface, sitemaps } from './sitemap';

const RouteWithSubRoutes = (route: RouteInterface, index: number) => {
  return (<Route key={index} path={route.path} element={<route.component routes={route.routes} />} />);
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <BrowserRouter>
      <Routes>
        {sitemaps.map((route: RouteInterface, i: number) => { return RouteWithSubRoutes(route, i)})}
      </Routes>
      </BrowserRouter>
      </header>
    </div>
  );
}

export default App;
